import React, { Component } from 'react';
import { Button, Card, Checkbox, Col, Divider, Icon, Input, List, Menu, Row, Spin } from 'antd';
import { connect } from 'dva';
import { reqGet } from '@/helpers/request';
import { isObjectValEqual } from '/common/utils/utils';
import { appConfig } from '@/appConfig';
import styles from './index.less';
import ModalComp from '/common/components/ModalItem/ModalComp';
import isArray from 'lodash/isArray';
import map from 'lodash/map';
import isFunction from 'lodash/isFunction';
import findIndex from 'lodash/findIndex';
import differenceBy from 'lodash/differenceBy';

const { Search, Group } = Input;

@connect(({ global }) => ({
  global,
}))
class ChooseCompForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      list: [],
      checkedList: props.checkedList || [], // 已选中的选项
    };
    this.searchData = {
      fuzzyMatch: 'code,name',
      search: '',
      current: 1,
      size: 10000,
      ...props.defaultSearchData,
    };
  }

  componentDidMount() {
    isFunction(this.props.onRef) && (this.props.onRef(this.props.refKey, this));
    const comboType = this._getTypeComboType();

    if (comboType) {
      // 获取分类
      const { dispatch } = this.props;
      const $this = this;
      const actionObj = {};
      if (this.props.typeCode) {
        actionObj.type = `global/findByCode`;
        actionObj.payload = {
          code: comboType,
        };
      } else {
        actionObj.type = `global/findByAppCode`;
        actionObj.payload = {
          appCode: comboType,
        };
      }

      dispatch(actionObj).then((rsp) => {
        if (rsp && (200 === rsp.status || 1 === rsp.status) && isArray(rsp.data) && rsp.data.length > 0) {
          $this.searchData.category = rsp.data[0]['code'];
          $this.fetchList();
        }
      });
    } else {
      this.fetchList();
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (!isObjectValEqual(prevProps, this.props)) {
      // console.log('update');

      if (prevProps.listApi !== this.props.listApi) {
        this.fetchList();
      }

      this.setState({
        checkedList: this.props.checkedList,
      });

    }
  }

  getAjaxData() {
    return this.state.checkedList;
  }
//左边菜单栏点击和搜索点击发送的ajax请求
  fetchList() {
    if (this.props.listApi) {
      this.setState({ loading: true }, () => {
        const $this = this;
        reqGet(this.props.listApi, this.searchData).then(rsp => {
          let list = [];
          if (rsp && (200 === rsp.status || 1 === rsp.status) && rsp.data) {
            if (isArray(rsp.data)) {
              list = rsp.data;
            } else if (isArray(rsp.data.records)) {
              list = rsp.data.records;
            }
          }
          $this.setState({
            list,
            loading: false,
          });
        });
      });
    }
  }

  _getTypeComboType(props) {
    const { typeCode, typeAppCode } = props || this.props;
    return typeCode || typeAppCode || '';
  }

  // 点击分类
  handleClickType(e) {
    // console.log('e', e);
    this.searchData.category = e.key;
    this.searchData.current = 1;
    this.fetchList();
  }

  // 触发搜索
  handleSearch(value) {
    this.searchData.search = value;
    this.fetchList();
  }

  handleChange(record) {
    // console.log(record);
    // const isChecked = e.target.checked;

    let isChecked = -1 === findIndex(this.state.checkedList, (v) => (v && v.id === record.id));
    let checkedList = [...this.state.checkedList];
    if (isChecked) {
      if ('multi' === this.props.mode) {
        checkedList.push(record);
      } else { // 单选
        checkedList = [record];
      }
    } else {
      if ('multi' === this.props.mode) {
        checkedList = checkedList.filter((v) => (v.id !== record.id));
      } else { // 单选
        checkedList = [];
      }
    }
    this.setState({
      checkedList,
    });
  }

  // 全选
  handleCheckAll() {
    const { list, checkedList } = this.state;
    const unCheckedList = differenceBy(list, checkedList, 'id');
    this.setState({
      checkedList: unCheckedList.concat(checkedList),
    });
  }

  // 反选
  handleCheckAllInstead() {
    const { list, checkedList } = this.state;
    const unCheckedList = differenceBy(list, checkedList, 'id');
    const withoutList = differenceBy(checkedList, list, 'id');

    this.setState({
      checkedList: unCheckedList.concat(withoutList),
    });
  }

  // 清空当前页
  handleCheckReset() {
    this.setState({
      checkedList: differenceBy(this.state.checkedList, this.state.list, 'id'),
    });
  }

  /**
   *  清空所有
   */
  resetAll() {
    this.setState({
      checkedList: [],
    });
  }

  render() {
    const { global, showChecked } = this.props;
    const comboType = this._getTypeComboType();
    const { checkedList, list } = this.state;
    const typeList = global[comboType] || [];
    const dataSource = showChecked ? list : list.filter(v => (-1 === findIndex(this.props.checkedList, { id: v.id })));
    const configObj = appConfig[this.props.appCode] || {};

    const wrapH = 486, cardHeadH = 50, cardBodyH = wrapH - cardHeadH;

    return (
      <Row type="flex" className={'bd1'} style={{ height: wrapH }}>
        {typeList.length > 0 && (
          <Col span={4} className={'bdr1'}>
            <Menu
              onClick={this.handleClickType.bind(this)}
              defaultSelectedKeys={['1']}
              mode="inline"
              style={{ border: 'none' }}
            >
              {
                //左边菜单栏
                map(typeList, (v) => (
                  <Menu.Item style={{ margin: 0 }} key={v.code}>{v.name}</Menu.Item>
                ))
              }
            </Menu>
          </Col>
        )}

        <Col span={typeList.length > 0 ? 20 : 24}>
          <Card
            size="small"
            style={{ height: '100%' }}
            bordered={false}
            headStyle={{ height: cardHeadH }}
            bodyStyle={{ height: cardBodyH, overflowY: 'auto' }}
            type="inner"
            title={<Search
              style={{ width: 200, marginRight: 8 }}
              placeholder="输入搜索"
              onSearch={this.handleSearch.bind(this)}
              onKeyDown={(e) => {e.stopPropagation();}}
            />}
            extra={
              <>
                {
                  'multi' === this.props.mode ?
                    <>
                      <a href='javascript:;' onClick={this.handleCheckAll.bind(this)}>全选</a>
                      <Divider type="vertical"/>
                      <a href='javascript:;' onClick={this.handleCheckAllInstead.bind(this)}>反选</a>
                      <Divider type="vertical"/>
                      <a href='javascript:;' style={{ marginRight: configObj.modelName ? 50 : 0 }}
                         onClick={this.handleCheckReset.bind(this)}>清空</a>
                    </> :
                    null
                }
                {
                  configObj.modelName ? (
                    <Button size={'small'}
                            className={styles.hRightBtn}
                            title={`查看所有${configObj.cn || ''}`}
                            onClick={e => {
                              e.preventDefault();
                              window.open(`./#/${configObj.modelName}`, '_blank');
                              // newWin.IS_OPEN = true; // 标识该窗口是新打开的，用于新窗口关闭自己的逻辑
                            }}>
                      <Icon type="double-right"/>
                    </Button>
                    // <a title={`转到${configObj.cn || ''}`}
                    //    href={`./#/${configObj.modelName}`}
                    //    target={'_blank'}><Icon type="double-right"/></a>
                  ) : null
                }
              </>
            }
          >
            <Spin spinning={this.state.loading}>
              <List
                dataSource={dataSource}
                renderItem={item => (
                  <List.Item key={item.id}
                             style={{ padding: '8px 0',cursor:'pointer' }}
                             onClick={(e) => {

                               this.handleChange(item);
                             }}>
                    <Checkbox
                      checked={-1 !== findIndex(checkedList, { id: item.id })}

                      // filter(v => (-1 === findIndex(this.props.checkedList, { id: v.id })));
                      // onChange={this.handleChange.bind(this, item)}
                      // style={{ width: '100%', display: 'block', padding: '8px 0' }}
                    /> {item.code} {item.name}
                  </List.Item>
                )}
              >
              </List>
            </Spin>
          </Card>
          {/*{this.state.loading && this.state.hasMore && (*/}
          {/*  <div className="demo-loading-container">*/}
          {/*    <Spin />*/}
          {/*  </div>*/}
          {/*)}*/}
        </Col>
      </Row>
    )
      ;
  }
}

/**
 * 选择组件
 * @type {{defaultSearchData: {}, mode: string, checkedList: Array, listApi: string, typeList: Array, typeAppCode: string, typeCode: string}}
 */
ChooseCompForm.defaultProps = {
  listApi: '', // String 列表的 api 路径,
  typeCode: '', //String 获取分类数据接口（findByCode）的 code 字段,
  typeAppCode: '', // String 获取分类数据接口（findByAppCode）的 appCode 字段,
  appCode: '', // String 主数据的
  defaultSearchData: {}, //Object 默认的搜索条件
  checkedList: [], // 已选中的数据数组
  mode: 'multi', // 选择模式，'multi'：多选；空值或其他值：单选
  showChecked: true, // Boolean 是否显示已选的数据
};

export default class ChooseComp extends Component {

  // 确认 选择科目
  handleOk(e) {
    // console.log(e)
    const checkedList = [...this.chooseRef.getAjaxData()];
    this.props.onOk && this.props.onOk(checkedList);
  }

  render() {
    const configObj = appConfig[this.props.appCode] || {};

    return (
      <ModalComp
        title={this.props.title || configObj.cn ||  ''}
        width={document.body.offsetWidth > 1200 ? document.body.offsetWidth * 0.5 : 520}
        visible={this.props.visible}
        onOk={this.handleOk.bind(this)}
        onCancel={this.props.onCancel}
        zIndex={1050}
      >
        <ChooseCompForm
          {...this.props}
          onRef={((refK, ref) => {
            this.chooseRef = ref;
          })}
        />
      </ModalComp>
    );
  }
}

ChooseComp.defaultProps = {
  ...ChooseCompForm.defaultProps,
  visible: false, // Boolean 是否显示
  title: '', // String （选传）自定义标题
  onOk: null, // Function “确认选择”之后的回调；
              // @params checkedList Array 选中的数据数组
              // (checkedList) => {}
  onCancel: null, // Function “取消选择”的回调
};


